@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';

.box {
  width: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  direction: rtl;
}

.box::-webkit-scrollbar {
  width: 6px;
  border-radius: 6px;
  display: none;
}

.box:hover::-webkit-scrollbar {
  display: block;
}

.box::-webkit-scrollbar-track {
  border-radius: 6px;
}

.box::-webkit-scrollbar-thumb {
  background: $gray-500;
  border-radius: 6px;
}

.box::-webkit-scrollbar-thumb:hover {
  background: $gray-600;
}

.item:hover {
  color: $gray-600;
}

.marginLeft {
  margin-left: 200px;
}

@include media-breakpoint-down(md) {
  .marginLeft {
    margin-left: 0;
  }
}
